<!--
 * @Author: zhuxiaoyi
 * @Date: 2022-07-25 15:23:10
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-12-13 15:36:11
 * @Description: 
-->
<template>
    <el-row class="tempalte-container">
        <el-col :span="24" class="header-container">
            <div class="logo-container">
                <div class="logo-img">
                </div>
                <div class="sub-head">
                    灌区灌溉遥感动态监测系统</div>
            </div>
            <div class="header-right-container">
            </div>
        </el-col>
        <el-col :span="24" class="login-container" :style="`height: ${viewHeight}px`">
            <div class="login-wrap">
                <div class="h1-con">
                    <div class="logo2-container">
                    </div>
                    <h1>
                        灌区灌溉遥感动态监测系统</h1>
                </div>
            </div>
            <div class="acntive-tab">
                <p>帐号密码登录</p>
            </div>
            <div class="form-container">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm" size="large">
                    <el-form-item prop="name">
                        <el-input v-model="ruleForm.name" :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" :prefix-icon="Lock" />
                    </el-form-item>
                    <el-form-item class="login-btn">
                        <el-button class="sub-btn" type="primary" @click="submitForm" style="width: 100%" color="#13c2c2">
                            确定
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { User, Lock, Guide, House, Menu } from "@element-plus/icons-vue";
import logo from "@/assets/logo/logo.png";
import HttpService from "@/api/api";
import { getToken, setToken, removeToken } from "@/utils/auth";
import Utils from "@/utils/util";
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from "@/store/user"

export default defineComponent({
    name: "Template",
    props: {
        prop: {
            type: String,
            required: false,
            default: () => {
                return "";
            },
        },
    },
    emits: ["emitsHandler"],
    components: { Guide, House, Menu },
    setup(props, context) {
        const router = useRouter()
        const route = useRoute()
        const userStore = useUserStore()
        const data = reactive({
            viewHeight: window.innerHeight,
            logo,
            ruleForm: {
                name: "",
                pass: "",
            },
            rules: {
                name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
            },
            ruleFormRef: null,
            User,
            Lock,
            token: getToken(),
            userInfo: {
                createDate: "",
                deptId: "",
                deptName: "",
                id: "",
                nickname: "",
                password: "",
                state: "0",
                username: "",
                ip: ''
            },
            log: {
                status: '',
                msg: ''
            }
        });
        const submitForm = async function () {
            await data.ruleFormRef.validate((valid) => {
                if (valid) {
                    console.log("验证成功");
                    login();
                } else {
                    console.log("error submit!");
                    return false;
                }
            });
        };
        const login = function () {
            let params = {
                username: data.ruleForm.name,
                password: data.ruleForm.pass,
            };
            HttpService.login.loginSystem(
                params,
                (res) => {
                    if (res.status == 200) {
                        if (res.data.code == 0) {
                            ElMessage({
                                message: '登录成功 ',
                                type: 'success',
                            })
                            userStore.userInfo = res.data.data.user
                            setToken(res.data.data.token, setTokenTime())
                            backToNav()
                            verifyToken();
                        } else {
                            console.log('登录失败' + res)
                            data.log.status = '失败'
                            data.log.msg = res.data.message
                            verifyToken();
                        }
                    }
                },
                (error) => {
                    console.log(error)
                }
            );
        };
        const setTokenTime = function () {
            const hour = 12; //失效时间是几小时
            let settime = new Date(new Date().getTime() + hour * 60 * 60 * 1000);
            return settime
        }
        const verifyToken = function () {
            if (
                data.token !== "" &&
                data.token !== null &&
                data.token !== undefined
            ) {
                data.token = getToken();
            } else {
                console.log("没有token");
            }
        };
        const backToNav = function () {
            router.push('/index/process/task')
        }
        onMounted(() => {
            if (route.query.username && route.query.password) {
                data.ruleForm.name = route.query.username
                data.ruleForm.pass = route.query.password
                login();
            }

        });
        return {
            ...toRefs(data),
            submitForm,
            login,
            backToNav
        };
    },
});
</script>

<style lang="scss" scoped>
.header-container {
    display: flex;
    flex-direction: row;
    height: 60px;
    background: #13c2c2;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 13px;

    .user-avatar {
        padding: 14px;
        height: 60px;
        width: 153px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;

        &:hover {
            background: hsla(0, 0%, 100%, .3);
        }
    }
}

.logo-container {
    width: 470px;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 24px;

    .logo-img {
        height: 32px;
        width: 48px;
        background: #fff;
        margin-right: 10px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    h1 {
        font-weight: 600;
        color: #fff;
        font-size: 18px;
        margin-right: 20px;
    }
}

.header-right-container {
    width: 120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .logout {
        height: 41px;
        padding: 0 14px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;

        &:hover {
            background: hsla(0, 0%, 100%, .3);
        }

        .guide {
            font-size: 5px;
            height: 16px;

        }
    }
}

.login-container {
    width: 100%;
    background: url("http://101.201.239.19/sjy-stgh/img/background.a568162c.svg") #f0f2f5 no-repeat 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // padding: 110px 0 0;

    .logo-container {
        width: 66px;
        height: 44px;
        margin-right: 16px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .logo2-container {
        width: 66px;
        height: 44px;
        margin-right: 16px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .h1-con {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;

        h1 {
            font-weight: 600;
            font-size: 33px;
            margin: 0;
        }
    }

    .sub-head {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 12px;
        margin-bottom: 40px;
    }
}

.login-wrap {
    width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-container {
    width: 368px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .demo-ruleForm {
        width: 368px;
    }
}

.acntive-tab {
    width: 368px;
    color: #14d0d0;
    text-align: center;

    p {
        padding: 12px 16px;
        font-size: 16px;
        position: relative;

        &::after {
            position: absolute;
            content: "";
            width: 100px;
            height: 2px;
            background: #14d0d0;
            left: 134px;
            bottom: 0px;
        }
    }
}

.sub-btn {
    color: #fff;
    font-size: 16px;

}
</style>
<style lang="scss">
.login-btn {
    .el-form-item__content {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
